<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <pre>
        hub.$on    在事件中心（hub）创建事件  hub.$on('event',(val)=>{})
        hub.$emit  在事件中心（hub）触发事件  hub.$emit('event',实参)
        hub.$off   在事件中心（hub）销毁事件    
    </pre>
    <div class="box">
        <wzp1></wzp1>
        <wzp2></wzp2>
        <button @click='del'>算了</button>
    </div>
    <script src="../../vue.js"></script>
    <script>
        Vue.config.devtools = true;
        var hub = new Vue()
        Vue.component('wzp1', {
            data: function () {
                return {
                    name: ''
                }
            },
            template: `
                <div>
                    <p> 汪佳慧是一坨屎吗？ + {{ name }} </p>   
                    <button @click='handle'>点击</button> 
                </div>
            `,
            mounted() {
                hub.$on('wzp1', (val) => {
                    this.name += val
                })
            },
            methods: {
                handle() {
                    hub.$emit('wzp2', '没错')
                }
            }
        })
        Vue.component('wzp2', {
            data: function () {
                return {
                    name: ''
                }
            },
            template: `
                <div>
                    <p> 汪佳慧是个傻逼吗？ + {{ name }} </p>   
                    <button @click='handle'>点击</button> 
                </div>
             `,
            mounted() {
                hub.$on('wzp2', (val) => {
                    this.name += val
                })
            },
            methods: {
                handle() {
                    hub.$emit('wzp1', '是的')
                }
            }
        })
        var vm = new Vue({
            el: '.box',
            data: {
                name: 1
            },
            methods: {
                del() {
                    hub.$off('wzp2')
                    hub.$off('wzp1')
                }
            }
        })
    </script>

</body>

</html>